<template>
  <div>
    <div style="background: var(--background);padding-top: 40px;" class="my-animation-slide-bottom">
      <!-- 标签 -->
      <div class="sort-warp shadow-box" v-if="!$common.isEmpty(sort) && !$common.isEmpty(sort.labels)">
        <div v-for="(label, index) in sort.labels" :key="index"
             :class="{isActive: !$common.isEmpty(labelId) && parseInt(labelId) === label.id}"
             @click="listArticle(label)">
          <proTag :info="label.labelName+' '+label.countOfLabel"
                  :color="$constant.before_color_list[Math.floor(Math.random() * 6)]"
                  style="margin: 12px">
          </proTag>
        </div>
      </div>

      <!-- 文章 -->
      <div class="article-wrap">
        <articleList :articleList="articles"></articleList>
        <div class="pagination-wrap">
          <div @click="pageArticles()" class="pagination" v-if="pagination.total !== articles.length">
            下一页
          </div>
          <div v-else style="user-select: none">
            ~~到底啦~~
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import twoPoem from "./common/twoPoem";
import proTag from "./common/proTag";
import articleList from "./articleList";
import myFooter from "./common/myFooter";

export default {
  components: {
    // twoPoem,
    proTag,
    articleList,
    // myFooter
  },
  props: {
    articles: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      sortId: this.$route.query.sortId,
      labelId: this.$route.query.labelId,
      sort: null,
      pagination: {
        current: 1,
        size: 10,
        total: 0,
        searchKey: "",
        sortId: this.$route.query.sortId,
        labelId: this.$route.query.labelId
      },
    };
  },
  watch: {
    $route() {
      this.pagination = {
        current: 1,
        size: 10,
        total: 0,
        searchKey: "",
        sortId: this.$route.query.sortId,
        labelId: this.$route.query.labelId
      };
      this.articles.splice(0, this.articles.length);
      this.sortId = this.$route.query.sortId;
      this.labelId = this.$route.query.labelId;
      this.getSort();
      this.getArticles();
    }
  },
  created() {
    this.getSort();
    this.getArticles();
  },
  methods: {
    pageArticles() {
      this.pagination.current = this.pagination.current + 1;
      this.getArticles();
    },
    getSort() {
      let sortInfo = this.$store.state.sortInfo;
      if (!this.$common.isEmpty(sortInfo)) {
        let sortArray = sortInfo.filter(f => {
          return f.id === parseInt(this.sortId);
        });
        if (!this.$common.isEmpty(sortArray)) {
          this.sort = sortArray[0];
        }
      }
    },
    listArticle(label) {
      this.labelId = label.id;
      this.pagination = {
        current: 1,
        size: 10,
        total: 0,
        searchKey: "",
        sortId: this.$route.query.sortId,
        labelId: label.id
      };
      this.articles.splice(0, this.articles.length);
      this.$nextTick(() => {
        this.getArticles();
      });
    },
    getArticles() {
      this.$http.post(this.$constant.baseURL + "/article/listArticle", this.pagination)
        .then((res) => {
          if (!this.$common.isEmpty(res.data)) {
            this.articles = this.articles.concat(res.data.records);
            this.pagination.total = res.data.total;
          }
        })
        .catch((error) => {
          this.$message({
            message: error.message,
            type: "error"
          });
        });
    },
  }
};
</script>
